$(function () {

  // 全局变量 当前在编辑的数据的id 
  let EditId;
  console.log("1 声明了一个全局变量 没有值");

  getCategoryList();

  // 1 获取所有文章列表数据
  // /admin/category/list
  function getCategoryList() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/list",
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        if (res.code === 200) {
          const list = res.data;
          // 模版引擎来渲染页面 
          const html = template("trTpl", { list });
          // 渲染到页面中
          $(".category_table tbody").html(html);
        } else {
          console.log("获取失败");
          console.log("res");
        }
      }

    })

  }


  // 2 点击 新增窗口中的 保存按钮
  $("#myModal .btn_opt").on("click", function () {
    // 2.1 获取表单内的数据
    const name = $("[name='name']").val().trim();
    const slug = $("[name='slug']").val().trim();

    // 2.2 发送 新增请求 
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/add",
      type: "post",
      data: { name, slug },
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        if (res.code === 200) {
          // 2.3 清空表单内容
          $("[name='name']").val("");
          $("[name='slug']").val("");
          // 2.4 关闭模态框
          $("#myModal").modal("hide");
          // 2.5 刷新列表数据 
          getCategoryList();
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })


  })


  // 3 点击编辑按钮   事件委托 
  $(".category_table").on("click", ".edit", function () {
    // console.log("祝老板永不脱发");
    // 1 显示编辑模态框
    $("#editModal").modal("show");
    // 2 获取被编辑的元素 将它渲染到 编辑模态框中 
    // 2.1 获取被点击的数据 id   （在渲染列表数据的时候 顺便把id 也挂载到html标签的属性上 ）
    // 2.2 发送一个请求 获取id对应的对应的那条数据 
    // 2.3 将那条数据 填充到编辑模态框中 

    // 获取被点击的按钮 祖先元素 tr标签
    // const id = $(this).parents("tr").data("id");
    // jq对象 获取 data-id 属性的写法
    // console.log(id);

    // 2.2 获取绑定到tr标签上的那个对象数据
    const value = $(this).parents("tr").data("value");
    // 2.3 把数据 填充到编辑模态框中 
    $("#name").val(value.name);
    $("#slug").val(value.slug);

    EditId = value.id;
    console.log("2 我点击了编辑按钮 给全局变量赋值 id");


  })

  // 4 编辑窗口中 保存按钮
  $("#editModal .btn_opt").on("click", function () {
    //  4.1 获取被编辑数据 （id如何获取会麻烦一些- 全局变量，其他很方便）
    console.log("3 再去点击保存  被编辑的数据的id ");
    console.log(EditId);
    const name = $("#name").val();
    const slug = $("#slug").val();
    // 4.2 拼接参数 发送请求 完成编辑
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/edit",
      type: "post",
      data: {
        id: EditId,
        name, slug
      },
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        if (res.code === 200) {
          // 4.3 关闭模态框
          $("#editModal").modal("hide");
          // 4.4 刷新数据
          getCategoryList();
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })

  })

  // 5 删除   - 在回调函数中的this 容易出现指向问题
  $(".category_table").on("click", ".delete", function () {
    // 5.1 弹出一个确认框  layui 确认框  -- 使用箭头函数来解决this指向的问题！！ 
    layer.confirm('您是否要删除', (index) => {
      // 5.2 获取被删除的数据id
      const id = $(this).parents("tr").data("value").id;
      // 5.3 拼接参数 发送请求 完成删除
      $.ajax({
        url: "http://localhost:8080/api/v1/admin/category/delete",
        type: "post",
        data: { id },
        headers: {
          Authorization: localStorage.getItem("token")
        },
        success(res) {
          if (res.code === 200) {
            // 5.4 数据刷新
            getCategoryList();
            // 5.5 关闭确认框
            layer.close(index);

          } else {
            console.log("失败");
            console.log(res);
          }
        }
      })

    });

  })


})